<!--
 * @Author: ranjianglai
 * @Date: 2023-01-12 17:27:41
 * @Description: 卡券中心
-->


<template>
    <view class="type-area cus-apge">
        <!-- 分段器 -->
        <ct-subsection :subsections="subsections" :current="current" @change="subsection"/>

        <!-- 列表 -->
        <view v-for="(item,index) in 3" :key="index" :class="['item', index == 0 ? 'com-m-t-20' : 'com-m-t-10']">
            <image class="kq-bg" src="/static/me/kq_bg.png" ></image>
            <view class="com-flex content">
                <view class="com-flex-col com-row-center com-col-center com-p-b-20 left">
                    <text style="font-size:64rpx">500</text>
                    <text class="com-font-32">日元积分</text>
                </view>
                <view class="com-m-l-20 com-flex-col center" style="flex:1">
                    <text class="com-font-32 com-font-bold">新人注册有礼</text>
                    <text class="com-m-t-10 com-font-22 com-assist-color">2022.12.02-2022.12.16</text>
                    <view class="com-m-t-10 com-font-24 com-flex">
                        <text class="com-m-r-6 com-minor-color">点击查看优惠券说明</text>
                        <u-icon name="arrow-right" size="24rpx" top="2rpx"></u-icon>
                    </view>
                </view>
                <view class="com-m-l-24 com-p-r-32 com-flex com-col-bottom button">
                    <u-button v-if="current==0" shape="circle" text="兑换使用" 
                        :customStyle="{
                            width: '136rpx',
                            height:'48rpx',
                            margin: 0,
                            fontSize:'24rpx',
                            border: '1px solid #02BDF3', 
                            color: '#02BDF3'
                        }">
                    </u-button>
                    <image v-if="current==1" class="ysy-ygq" src="/static/me/kq_ysy.png" ></image>
                    <image v-if="current==2" class="ysy-ygq" src="/static/me/kq_ygq.png" ></image>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    name:'cardVoucherCenter',
    components: {},
    props:{},

    data () {
        return {
            // 分段器
            subsections: ['未使用', '已使用','已过期'],
            current: 0,
        }
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 切换tab
        subsection(e){
            this.current = e.current;
        },
    }
}
</script>


<style scoped lang='scss'>
.item{
    width: 100%;
    height: 184rpx;
    position: relative;
    .kq-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .content{
        position: relative;
        z-index: 2;
        width: 100%;
        height: 184rpx;
        .left{
            width: 200rpx;
            color: #fff;
        }
        .left,.center,.button{
            height: 120rpx;
        }
        .ysy-ygq{
            width: 112rpx;
            height: 112rpx;
        }
    }
}
</style>